<template>
  <div class="collection-box">
    <div class="fixed">
      <div class="collection-header">
        <div class="collection-left">
          <span class="iconfont icon-zuojiantou"></span>
          <span>我想要的</span>
        </div>
        <div class="collection-right">
          <span class="iconfont icon-fangdajing"></span>
          <span class="iconfont icon-funnel"></span>
          <div @click="goBuy">
            <span class="iconfont icon-24gl-bag"></span>合并下单
          </div>
        </div>
      </div>
      <Promise />
    </div>
    <div class="tips">
      <span class="iconfont icon-laba"></span>&nbsp;
      <span>揭秘线下鉴别查验全流程</span>
    </div>

    <van-swipe-cell>
      <!-- <van-card
    num="2"
    price="2.00"
    desc="描述信息"
    title="商品标题"
    class="goods-card"
    thumb="https://img01.yzcdn.cn/vant/cat.jpeg"
  /> -->
      <div class="goods">
        <div class="goods-img">
          <img src="../../../assets/imgs/1.jpg" alt="" />
        </div>
        <div class="goods-info">
          <div class="name-size" style="font-size: 0.12rem">
            <p class="goods-name" style="line-height: 0.2rem">
              adidas Pro Bounce 2019 黑
            </p>
            <p class="goods-size">42</p>
          </div>
          <div class="goods-price">
            <span class="logo">得物</span>&nbsp;<span
              class="rmb"
              style="font-size: 0.12rem"
              >¥</span
            >&nbsp;<span class="discount">679</span
            ><span class="pricing">¥689</span>
          </div>
        </div>
      </div>
      <template #right>
        <van-button square text="降价提醒" class="tip-button" />
        <van-button square text="批量删除" class="batch-delete-button" />
        <van-button square text="删除" class="delete-button" />
      </template>
    </van-swipe-cell>
  </div>
</template>

<script>
import Promise from "../view-com/promise.vue";
import mouth from "../../../../public/utils/mouth";
import Vue from "vue";
import { SwipeCell } from "vant";
Vue.use(SwipeCell);

export default {
  name: "Collection",
  components: {
    Promise,
  },
  methods: {
    goBuy() {
       this.$router.push("./Shoppingcart")
    },
    // 购物车删除  @click="del"
     // del(){
    //      mouth.get("/goods/delete/8",{
    //       // params:{
    //       //   id:"1"
    //       // }
    //      })
    //     .then((res) => {
    //       // this.shopList = res.data;
    //       console.log(res.data);
    //     })
    //     .catch((err) => {
    //       console.log("出错了", err);
    //     });
    // }
  },
  // created(){
  //   this.del();
  // }
};
</script>

<style scoped>
@import url("../../../assets/iconfont/iconfont.css");
.fixed {
  width: 100%;
  height: 0.92rem;
  position: fixed;
  top: 0;
  z-index: 10;
  padding: 0 0.17rem;
  box-sizing: border-box;
}

.collection-header {
  height: 0.54rem;
  display: flex;
  justify-content: space-between;
  line-height: 0.54rem;
}

.icon-zuojiantou {
  font-size: 0.18rem;
  margin-right: 0.18rem;
}
.collection-right {
  width: 1.53rem;
  display: flex;
  justify-content: space-between;
  font-size: .14rem;
}
.tips {
  height: 0.3rem;
  line-height: 0.3rem;
  background-color: #f4f3f8;
  padding-left: 0.17rem;
  font-size: 0.12rem;
  color: #acabb1;
  margin-top: 0.92rem;
}

.delete-button,
.batch-delete-button,
.tip-button {
  width: 0.65rem;
  height: 100%;
  padding: 0 0.18rem;
  color: #fff;
  margin: 0;
}
.goods {
  height: 1.24rem;
  padding: 0.14rem;
  margin-bottom: 0.02rem;
  display: flex;
}

.tip-button {
  background-color: #2b2c3c;
}
.batch-delete-button {
  background-color: #7f7f8e;
}
.delete-button {
  background-color: #eb545b;
}

.goods-img {
  width: 0.96rem;
  height: 0.96rem;
  border: solid 1px #f1f1f5;
  margin-right: 0.14rem;
}

.goods-img img {
  width: 100%;
  height: 100%;
}

.goods-info {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.logo {
  width: 0.17rem;
  height: 0.17rem;
  background-color: #000;
  color: #fff;
  font-size: 0.12rem;
}

.goods-info .goods-price .discount {
  font-size: 0.14rem;
  font-weight: bold;
  margin-right: 0.07rem;
}

.goods-info .goods-price .pricing {
  font-size: 0.12rem;
  color: #afaeb1;
  text-decoration: line-through;
}
</style>